$(document).ready(function () {
    var str = ''
    for (var itemName in questions) {
        str += '<h3>' + itemName + '</h3>'
        var data = questions[itemName]
        data.map(function (item) {
            var temp = ''
            item.answer.map(function (subItem) {
                temp += '<p>' + subItem + '</p>'
            })
            str += '<div class="question clear_flow"><div class="outter question-outter"><div class="inner question-inner">Q</div></div><div class="question-item clear_flow"><span>' + item.question + '</span><div class="question-button"><div class="question-vertical"></div><div class="question-horizontal"></div></div></div><div class="answer"><div class="outter answer-outter"><div class="inner answer-inner">A</div></div><div class="answer-content">' +
                temp + '</div></div></div>'
        })
    }
    $('.main').html(str)
    var currentItem
    $('.question-item').click(function (event) {
        if (currentItem) {
            $(currentItem).toggleClass('question-chosen')
            $(currentItem).next().slideToggle()
        }
        $(event.currentTarget).find('.question-vertical').toggleClass('question-chosen')
        $(event.currentTarget).next().slideToggle()
        // if ($(event.currentTarget).next().style.display === 'none') {
        //     currentItem = undefined
        // }
    })
})